/**
 * 收益率趋势
 */

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { XYAxisChartsC, NoDataC, SecondHeaderC } from '../../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin } from 'antd';

@Form.create()
class YieldTrend extends PureComponent {
  state = {
    xAxis: undefined,
    series: undefined,
  };

  componentDidMount() {
    if (this.props.searchData && this.props.searchData.portfolioCode) {
      this.getData(this.props.searchData);
    }
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchData) !== JSON.stringify(this.props.searchData)) {
      this.getData(nextProps.searchData);
    }
  }
  componentWillUnmount() {
    // 离开前清除models数据
  }
  // 获取echarts数据
  getData = (searchProps) => {
    this.props.dispatch({
      type: 'yieldPerformanceInProM/getYieldTrend',
      payload: searchProps,
      callback: (type, res) => {
        if (type == 'success') {
          this.setState({
            xAxis: res.xAxis,
            series: this.changeSeries(res.series),
          });
        }
      },
    });
  };

  // 处理echarts数据
  changeSeries = (arr) => {
    const data = _.cloneDeep(arr);
    if (data && data.length) {
      data.map((item) => {
        if (item.name == '组合') {
          item.type = 'line';
          item.xAxisIndex = 0;
          item.yAxisIndex = 0;
          item.toFixed = 2;
        }
        if (item.name == '基准') {
          item.type = 'line';
          item.xAxisIndex = 0;
          item.yAxisIndex = 0;
          item.toFixed = 2;
        }
      });
    }
    return data;
  };
  render() {
    const { series, xAxis } = this.state;
    const { colorType } = this.props;
    return (
      <div style={{ width: '100%', height: '100%' }}>
        {/* 收益率趋势 */}
        {this.props.yieldTrendType != 2 && <SecondHeaderC title='收益率趋势' colorType={colorType} />}
        <Spin spinning={this.props.loading.effects['yieldPerformanceInProM/getYieldTrend'] == true}>
          {series?.length > 0 && xAxis?.length > 0 ? <XYAxisChartsC xAxis={xAxis} series={series} height='314px' dataZoom={true} colorType={colorType} /> : <NoDataC />}
        </Spin>
      </div>
    );
  }
}
export default connect(({ yieldPerformanceInProM, loading }) => ({
  yieldPerformanceInProM,
  loading,
}))(YieldTrend);
